<template>
	<div class="welcome-card">
		<div class="decorative-circle"></div>
		<h1 class="welcome-title">
			<span class="icon">⚙️</span>
			生产配方计算器
		</h1>
		<p class="welcome-text">
			欢迎使用跨游戏生产计算系统，当前支持以下游戏：
		</p>
		<div class="game-list">
			<div class="game-item factory">
				<div class="game-logo">🏭</div>
				<h3>幸福工厂</h3>
			</div>
			<div class="game-item dyson">
				<div class="game-logo">🪐</div>
				<h3>戴森球计划</h3>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.welcome-card {
		position: relative;
		max-width: 800px;
		margin: 2rem auto;
		padding: 2.5rem;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border-radius: 1.5rem;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.welcome-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
	}

	.decorative-circle {
		position: absolute;
		top: -50px;
		right: -50px;
		width: 200px;
		height: 200px;
		background: linear-gradient(45deg, #4cc9f0aa 0%, #4361ee55 100%);
		border-radius: 50%;
	}

	.welcome-title {
		position: relative;
		margin-bottom: 1.5rem;
		font-size: 2.2rem;
		color: #2b2d42;
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.welcome-title .icon {
		font-size: 1.8em;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	}

	.welcome-text {
		font-size: 1.1rem;
		color: #4a4e69;
		line-height: 1.6;
		margin-bottom: 2rem;
		text-align: center;
	}

	.game-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 1.5rem;
		justify-content: center;
	}

	.game-item {
		padding: 1.5rem;
		background: white;
		border-radius: 1rem;
		text-align: center;
		transition: all 0.3s ease;
		border: 1px solid #dee2e6;
	}

	.game-item:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	}

	.game-logo {
		font-size: 3rem;
		margin-bottom: 1rem;
		transition: transform 0.3s ease;
	}

	.game-item:hover .game-logo {
		transform: scale(1.1);
	}

	h3 {
		margin: 0;
		color: #2b2d42;
		font-size: 1.2rem;
		font-weight: 600;
	}

	/* 为不同游戏添加特色颜色 */
	.factory {
		border-top: 4px solid #f72585;
	}

	.dyson {
		border-top: 4px solid #4895ef;
	}

	@media (max-width: 600px) {
		.welcome-card {
			margin: 1rem;
			padding: 1.5rem;
		}

		.welcome-title {
			font-size: 1.8rem;
		}
	}
</style>